// 背景图片
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 0.5),(min-device-pixel-ratio: 0.5)
    background-image: url($url + "@0.5x.png")
  @media (-webkit-min-device-pixel-ratio: 1),(min-device-pixel-ratio: 1)
    background-image: url($url + "@1x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

// 不换行
no-wrap()
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap

// 扩展点击区域
extend-click()
  position: relative
  &:before
    content: ''
    position: absolute
    top: -10px
    left: -10px
    right: -10px
    bottom: -10px

// 1px border
border-1px($color)
  position relative
  &:after
    display block
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid $color
    content ' '

border-around-1px($color)
  box-shadow: inset 0px -1px 1px -1px $color;
border-t-1px($color)
  position relative
  &:after
    display block
    position absolute
    left 0
    top  0
    width 100%
    border-top 1px solid $color
    content ' '
border-r-1px($color)
  position relative
  &:after
    position absolute
    top: 0
    right: 0
    bottom: 0
    border-right 1px solid $color
    content ' '
border-none()
  &:after
    display none

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-t-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
  .border-r-1px
    &::after
      -webkit-transform: scaleX(0.7)
      transform: scaleX(0.7)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-t-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)
  .border-r-1px
    &::after
      -webkit-transform: scaleX(0.5)
      transform: scaleX(0.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

// 分割
.split
  width: 100%
  height: 10px
  background: #e0e0e0
